<template>
    <el-card class="sales">
        <!-- body 首页中间部分-->
        <template #header>
            <!-- body左边 -->
            <el-menu :default-active="state.activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1">销售额</el-menu-item>
                <el-menu-item index="2">访问量</el-menu-item>
            </el-menu>
            <!-- body右边 -->
            <div class="right">
                <el-radio-group v-model="state.time" label="size control">
                    <el-radio-button label="今日">今日</el-radio-button>
                    <el-radio-button label="本周">本周</el-radio-button>
                    <el-radio-button label="本月">本月</el-radio-button>
                    <el-radio-button label="本年">本年</el-radio-button>
                </el-radio-group>
                <el-date-picker v-model="state.time2" type="daterange" range-separator="至" start-placeholder="Start date"
                    end-placeholder="End date" :shortcuts="shortcuts" />
            </div>
            <!-- body柱状图与右侧的排行列表 -->
            <div class="sales-content">
                <v-chart :option="getOption()" autoresize></v-chart>
                <div class="sales-content-list">
                    <h4 class="list-title">{{ state.activeIndex === '1' ? '订单销售额排名' : '用户访问量排名' }}</h4>
                    <ul>
                        <li v-for="rank in rankData" :key="rank.no"><span :class="{ 'list-no': rank.no < 4 }">{{ rank.no
                        }}</span><span>{{ rank.name }}</span><span>{{ rank.count }}</span></li>
                    </ul>
                </div>
            </div>
        </template>
    </el-card>
</template>

<script lang="ts">
export default {

}
</script>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { useReportDataStore } from '@/stores/reportData'

//获取store
const reportDataStore = useReportDataStore()
//销售额的Y轴数据
const orderFullYear = computed(() => reportDataStore.reportData.orderFullYear)
// 销售额的X轴数据
const orderFullYearAxis = computed(() => reportDataStore.reportData.orderFullYearAxis)
//用户访问量Y轴数据
const userFullYear = computed(() => reportDataStore.reportData.userFullYear)
//用户访问量X轴数据
const userFullYearAxis = computed(() => reportDataStore.reportData.userFullYearAxis)
//订单销售额排行榜
const orderRank = computed(() => reportDataStore.reportData.orderRank)
//用户访问量排行榜
const userRank = computed(() => reportDataStore.reportData.userRank)
// 渲染右侧列表的数量
const rankData = computed(() => state.activeIndex === '1' ? orderRank.value : userRank.value)

const getOption = () => {
    const text = state.activeIndex === '1' ? '订单销售趋势' : '用户访问量趋势';
    return {
        title: {
            text,
            textStyle: {
                fontSize: 14,
                color: '#333'
            },
            left: 10
        },
        xAxis: {
            type: 'category',
            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            data: state.activeIndex === '1' ? orderFullYearAxis.value : userFullYearAxis.value,
            axisTick: {
                // 标签刻度对齐 底部的那个刻度
                alignWithLabel: true
            }
        },
        color: '#3398DB', // 柱状体颜色
        yAxis: {
            // 坐标轴在 grid 区域中的分隔线。
            splitLine: {
                lineStyle: {
                    type: 'dotted',
                    color: '#ccc'
                }
            }
        },
        grid: {
            left: 50,
            right: 50,
            top: 50,
            bottom: 50
        },
        tooltip: {},
        series: [
            {
                // data: [120, 200, 150, 80, 70, 110, 130],
                data: state.activeIndex === '1' ? orderFullYear.value : userFullYear.value,
                type: 'bar',
                showBackground: true,
                barWidth: '35%',
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }
        ]
    };
};


const state = reactive({
    activeIndex: '1',
    time: '本周',
    time2: ''
})

const handleSelect = (value: string) => {
    // console.log(value);
    state.activeIndex = value // 为了将来进行切换
};

const size = ref<'default' | 'large' | 'small'>('default')

const shortcuts = [
    {
        text: '最近一周',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
        },
    },
    {
        text: '最近一月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
        },
    },
    {
        text: '最近三个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
        },
    },
]
</script>

<style scoped lang="scss">
.sales {
    margin-top: 20px;

    :deep(.el-card__header) {
        position: relative;
        padding: 0 20px;
        border-bottom: none;

        .right {
            position: absolute;
            top: 0;
            right: 20px;
            display: flex;
            align-items: center;
            height: 59px;

            .el-radio-group {
                margin-right: 20px;
            }
        }
    }

    .sales-content {
        height: 270px;
        display: flex;

        .echarts {
            flex: 5;
        }

        .sales-content-list {
            flex: 2;

            .list-title {
                font-size: 14px;
                margin: 20px 0 10px;
            }

            ul {
                list-style: none;
                font-size: 12px;
                padding: 0 20px 0 0;

                li {
                    height: 26px;
                    line-height: 26px;

                    span {
                        cursor: pointer;

                        &:first-child {
                            display: inline-block;
                            width: 20px;
                            height: 20px;
                            line-height: 20px;
                            text-align: center;
                            margin-right: 10px;
                        }

                        &.list-no {
                            background-color: #000;
                            color: #fff;
                            border-radius: 50%;
                        }

                        &:last-child {
                            float: right;
                        }
                    }
                }
            }
        }
    }

}
</style>